/* 设置背景颜色和全局字体 */
.root {
    -fx-background-color: #f0f0f0; /* 浅灰色背景 */
    -fx-font-family: "Arial", sans-serif;
    -fx-font-size: 14px;
}

/* 菜单栏样式 */
.menu-bar {
    -fx-background-color: #d8ecf8; /* 淡蓝色背景 */
    -fx-text-fill: white; /* 白色字体 */
    -fx-font-size: 16px;
}

/* 菜单项的背景颜色 */
.menu-bar .menu > .menu-item {
    -fx-background-color: #59ade5; /* 深蓝色 */
    -fx-text-fill: white;
}

.menu-bar .menu > .menu-item:hover {
    -fx-background-color: #1abc9c; /* 悬停时绿色 */
}

/* 左侧导航栏按钮 */
.nav-button {
    -fx-background-color: #ecf0f1; /* 浅灰色按钮 */
    -fx-text-fill: #2c3e50; /* 深灰色文字 */
    -fx-font-size: 14px;
    -fx-pref-width: 180px;
    -fx-pref-height: 40px;
    -fx-border-color: #bdc3c7; /* 边框颜色 */
    -fx-border-width: 1px;
    -fx-background-radius: 5px;
}

#sideNav Button:hover {
    -fx-background-color: #95a5a6; /* 悬停效果 */
    -fx-text-fill: white;
}

/* 选中的按钮样式 */
.selected {
    -fx-background-color: #3498db; /* 选中时的蓝色背景 */
    -fx-text-fill: white; /* 选中时字体为白色 */
    -fx-font-weight: bold; /* 选中时加粗字体 */
}

/* 右侧内容区域 */
#contentArea {
    -fx-background-color: white; /* 内容区域背景白色 */
    -fx-border-radius: 5px;
    -fx-border-color: #ecf0f1;
    -fx-border-width: 1px;
    -fx-padding: 10px;
}

/* 赛事简介 TextArea 样式 */
#textAreaContent {
    -fx-font-size: 16px;
    -fx-background-color: #ecf0f1; /* 浅灰色背景 */
    -fx-text-fill: #2c3e50; /* 深灰色字体 */
    -fx-border-radius: 5px;
    -fx-border-color: #bdc3c7;
    -fx-padding: 10px;
    -fx-pref-height: 150px; /* 增大高度以适配内容 */
}

/* 标题样式（赛事简介、当前赛事状态、快速操作） */
.section-header {
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: #2980b9; /* 蓝色 */
}

/* 信息框样式 */
.info-box {
    -fx-background-color: #ecf0f1; /* 淡灰色背景 */
    -fx-border-radius: 5px;
    -fx-padding: 10px;
    -fx-border-color: #bdc3c7;
}

/* 快速操作按钮 */
#contentArea HBox Button {
    -fx-background-color: #3498db; /* 按钮背景色 */
    -fx-text-fill: white; /* 白色字体 */
    -fx-pref-width: 150px;
    -fx-pref-height: 40px;
    -fx-background-radius: 5px;
}

#contentArea HBox Button:hover {
    -fx-background-color: #1abc9c; /* 悬停时变色 */
}

.add-button {
    -fx-background-color: #2196F3;
    -fx-text-fill: white;
}

.add-button:hover {
    -fx-background-color: #1976D2;
}

/* 表格操作按钮 */
.table-cell {
    -fx-padding: 5;
}

/* 特定样式规则，避免DatePicker内部的按钮被影响 */
#startDatePicker Button {
    -fx-background-color: transparent; /* 背景色透明 */
    -fx-text-fill: white; /* 白色字体 */
    -fx-pref-width: 70px;
    -fx-pref-height: 40px;
    -fx-background-radius: 5px;
}

#eventsTable Button, #teamTable Button, #athleteTable Button {
    -fx-background-color: transparent;  /* 去掉按钮的背景色 */
    -fx-border-color: transparent;      /* 去掉按钮的边框 */
    -fx-text-fill: #4CAF50;              /* 按钮文本颜色 */
    -fx-font-size: 14px;                 /* 字体大小 */
    -fx-font-weight: bold;               /* 字体加粗 */
    -fx-padding: 5px 10px;               /* 内边距 */
    -fx-cursor: hand;                   /* 鼠标手型 */
    -fx-pref-width: 70px;
    -fx-pref-height: 30px;
}

/* 鼠标悬停时的效果 */
#eventsTable Button:hover, #teamTable Button:hover, #athleteTable Button:hover {
    -fx-background-color: transparent;
    -fx-text-fill: #007bb5;              /* 悬停时文本颜色变化 */
}

/* 按钮按下时的效果 */
#eventsTable Button:pressed, #teamTable Button:pressed, #athleteTable Button:pressed {
    -fx-text-fill: #006994;              /* 按钮按下时文本颜色变化 */
}

/* 为 ComboBox 添加背景颜色和边框 */
.combo-box {
    -fx-background-color: #f0f0f0; /* 背景颜色 */
    -fx-border-color: #cccccc;    /* 边框颜色 */
    -fx-border-radius: 5;         /* 边框圆角 */
    -fx-font-size: 14px;          /* 字体大小 */
    -fx-text-fill: #333333;       /* 字体颜色 */
}

/* 当 ComboBox 被选中时的边框颜色 */
.combo-box:hover {
    -fx-border-color: #4CAF50; /* 悬停时边框颜色 */
}

/* 定义下拉列表的样式 */
.combo-box .list-cell {
    -fx-background-color: #ffffff; /* 默认背景颜色 */
    -fx-text-fill: #333333;        /* 默认文字颜色 */
}

.combo-box .list-cell:hover {
    -fx-background-color: #e5e5e5; /* 悬停时背景颜色 */
}

/* 选中项的样式 */
.combo-box .list-cell:focused {
}

/* 批量导入按钮样式 */
#contentArea HBox .export-button, #contentArea HBox .import-button, #contentArea HBox .add-button {
    -fx-pref-width: 120px;
    -fx-pref-height: 15px;
    -fx-background-color: #4CAF50; /* 绿色背景 */
    -fx-text-fill: white;         /* 白色文字 */
    -fx-font-size: 12px;          /* 字体大小 */
    -fx-font-weight: bold;        /* 字体加粗 */
    -fx-padding: 8 18;           /* 按钮内边距 */
    -fx-border-radius: 5;         /* 圆角边框 */
    -fx-background-radius: 5;     /* 圆角背景 */
    -fx-cursor: hand;             /* 鼠标悬停变成手型 */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 4, 0, 2, 2); /* 添加阴影 */
    -fx-border-color: #388E3C;    /* 边框颜色 */
}

#contentArea HBox .export-button:hover, #contentArea HBox .import-button:hover, #contentArea HBox .add-button:hover {
    -fx-background-color: #45A049; /* 悬停时的背景颜色 */
    -fx-border-color: #2E7D32;    /* 悬停时的边框颜色 */
}

#contentArea HBox .export-button:pressed, #contentArea HBox .import-button:pressed, #contentArea HBox .add-button:pressed {
    -fx-background-color: #388E3C; /* 按下时的背景颜色 */
    -fx-effect: none;              /* 按下时移除阴影效果 */
}

/* 设置 TabPane 整体背景色 */
.tab-pane {
    -fx-background-color: #f0f0f0;
}

/* 标签头区域背景采用渐变色，并设置内边距 */
.tab-pane>*.tab-header-area>*.tab-header-background {
    -fx-background-color: linear-gradient(to right, #c1e3f6, #cbdde8);
    -fx-padding: 5;
}

/* 未选中标签的样式：透明背景、白色文字，加大字体和粗体 */
.tab-pane .tab-header-area .tab {
    -fx-background-color: transparent;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-padding: 8 15;
}

/* 选中标签样式：白色背景，深色文字，并带有边框阴影效果 */
.tab-pane .tab-header-area .tab:selected {
    -fx-background-color: white;
    -fx-text-fill: #333333;
    -fx-background-insets: 0;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 5, 0.0, 0, 2);
}

/* 鼠标悬停时改变背景颜色 */
.tab-pane .tab-header-area .tab:hover {
    -fx-background-color: rgba(255, 255, 255, 0.3);
}

/* 内容区域背景色与内边距设置 */
.tab-pane .tab-content-area {
    -fx-background-color: white;
    -fx-padding: 15;
    -fx-border-color: #dcdcdc;
    -fx-border-width: 0 1 1 1;
}

/* 移除选中及聚焦状态下的蓝色边框 */
.tab-pane .tab:selected,
.tab-pane .tab:selected:focused,
.tab-pane .tab:focused {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-border-color: transparent;
}